<template>
    <div class="box">
        <van-nav-bar  left-arrow
  @click-left="onClickLeft" fixed >
           
  <van-icon name="wap-nav" slot="right"  size="18px" color="#000" />
</van-nav-bar>
        <div style="height:30px"></div>

        <h2 class="biao">协调性提升</h2>
      
        <p class="ti">训练概述</p>
          <div class="box1">
        <div >
            
            <p>全身</p>
            <p><span style="width:50px"></span></p>
         </div>
          

         
         </div>
  <p class="tt">6个动作，循环10次，15分钟</p>
        

    <div>
        <p class="dong">动作列表</p>
        <ul class="pice">
            <li>
                <img :src="src" alt="" style="width:80px;height:80px">
                <p>全身协调热身
                    <span>x12</span>
                <span>休息00:15</span>
                </p>
                
            </li>
             <li>
                <img :src="src" alt="" style="width:80px;height:80px">

                <p>全身协调训练
                    <span>x11</span>
                <span>休息00:15</span>
                </p>
                
            </li>
             <li>
                <img :src="src" alt="" style="width:80px;height:80px">

                <p>协调交叉步
                    <span>x15</span>
                <span>休息00:15</span>
                </p>
                
            </li>
             <li>
                <img :src="src" alt="" style="width:80px;height:80px">

                <p>制动踢腿
                      <span>x15</span>
                <span>休息00:15</span>
                </p>
              
            </li>
             <li>
                <img :src="src" alt="" style="width:80px;height:80px">

                <p>前后并开跳
                    <span>x12</span>
                <span>休息00:15</span>
                </p>
                
            </li>
             <li>
                <img :src="src" alt="" style="width:80px;height:80px">

                <p>左右平移跳
                       <span>x16</span>
                <span>休息00:15</span>
                </p>
             
            </li>
            <li>    
                <p>
                    需要器械
                    <span>徒手，</span>
                </p>


            </li>
            
 </ul>

    </div>  

    <div style="width:100;height:60px"></div>

    <van-button type="primary" size=large class="btn-l">开始训练</van-button>


    </div>
</template>

<script>
export default {
name:'Xtts',
data(){
    return{
        src:'https://img.yzcdn.cn/vant/cat.jpeg'
    }


},
methods:{

onClickLeft(){
    this.$router.go(-1)

}


}
}
</script>

<style scoped>
*{
    margin: 0;
    padding: 0
}
.box{
    padding:10px 10px;
    box-sizing: border-box; 
 background: #fff
}
.box p{
   font-size: 16px
}
.box1{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
   

}
.biao{
    line-height: 60px;
    margin:10px 0 
}
.ti{
    line-height: 40px
}
.box1 div p:nth-of-type(2){
    width:80px;
    height: 10px;
    background: #ccc;
    position: relative;
    margin-top:10px 
    
}
.box1 div p:nth-of-type(2) span{
     width:40px;
    height: 10px;
    background: #666666;
    position: absolute;
    top: 0;
    left:0;
    
 

}
.tt{

    line-height: 40px;
    font-size: 12px
}
.pice li{
    display: flex;
    padding:10px 0px;
    border-bottom: 1px solid #ccc



}
.dong {

    line-height: 40px
}
.pice li p{
  display: flex;
  flex-direction: column;
  padding: 0px 10px;
  justify-content: space-between
  

}
.pice li p span{
    font-size: 14px;
    color:#bbb
}
.btn-l{

      position: fixed;
    bottom: 0px;
    left: 0
   }
</style>
